<template>
  <div class="m-multi">
    <h3 class="u-hd3">
      <span class="f-fl">网易云音乐多端下载</span>
    </h3>
    <ul class="bg f-cb">
      <li>
        <a
          href="javascript:;"
          class="ios"
          hidefocus="true"
          target="_blank"
        >iPhone</a>
      </li>
      <li>
        <a
          href="javascript:;"
          class="pc"
          hidefocus="true"
          target="_blank"
        >PC</a>
      </li>
      <li>
        <a
          href="javascript:;"
          class="aos"
          hidefocus="true"
          target="_blank"
        >Android</a>
      </li>
    </ul>
    <p class="s-fc4">同步歌单，随时畅听320k好音乐</p>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.m-multi {
  margin: 20px 0;
  padding-bottom: 20px;
}
.u-hd3 {
  position: relative;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}
.f-fl {
  float: left;
}
.m-multi .bg,
.m-multi .bg a:hover {
  background: url("../../assets/wjwimgs/sprite.png") no-repeat 0 9999px;
}
.m-multi .bg {
  height: 65px;
  margin-bottom: 10px;
  background-position: 0 -392px;
}
.m-multi .bg li {
  float: left;
}
.m-multi .bg a {
  display: block;
  width: 42px;
  height: 48px;
  text-indent: -9999px;
}
[hidefocus] {
  outline: none;
}
.m-multi .bg .pc {
  width: 60px;
  margin: 0 26px 0 30px;
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.m-multi .bg .ios:hover {
  background-position: 0 -472px;
}
.m-multi .bg .pc:hover {
  background-position: -72px -472px;
}
.m-multi .bg .aos:hover {
  background-position: -158px -472px;
}
</style>